<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../base.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的信息</title>


    <style type="text/css">
        .default {
            background: #eeeeee;
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 4px 2px;
        }

        .weak {
            background: #FF0000;
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 4px 2px;
        }

        .medium {
            background: #FF9900;
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 4px 2px;
        }

        .strong {
            background: #81c234;
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 4px 2px;
        }

        .aaa {
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            background: #ddd;
            text-align: center;
            margin: 4px 2px;
        }
    </style>
</head>
>
<script type="text/javascript">
    window.onload = function () {

        var oInput = document.getElementById('pwd');
        oInput.value = '';
        var spans = document.getElementsByTagName('span');
        var spans1 = [];
        var j = 0;
        for (var i = 0; i < spans.length; i++) {
            if (spans[i].className == "aaa") {
                spans1[j] = spans[i];
                j++;
            }
            else {

            }
        }
        oInput.onkeyup = function () {
            //强度状态设为默认

            spans1[0].className = spans1[1].className = spans1[2].className = "default";

            var pwd = this.value;
            var result = 0;
            for (var i = 0, len = pwd.length; i < len; ++i) {
                result |= charType(pwd.charCodeAt(i));
            }

            var level = 0;
            //对result进行四次循环，计算其level
            for (var i = 0; i <= 4; i++) {
                if (result & 1) {
                    level++;
                }
                //右移一位
                result = result >>> 1;
            }

            if (pwd.length >= 6) {
                switch (level) {
                    case 1:
                        spans1[0].className = "weak";
                        break;
                    case 2:
                        spans1[0].className = "medium";
                        spans1[1].className = "medium";
                        break;
                    case 3:
                    case 4:
                        spans1[0].className = "strong";
                        spans1[1].className = "strong";
                        spans1[2].className = "strong";
                        break;
                }
            }
        }
    }

    /*
        定义一个函数，对给定的数分为四类(判断密码类型)，返回十进制1，2，4，8
        数字 0001 -->1  48~57
        小写字母 0010 -->2  97~122
        大写字母 0100 -->4  65~90
        特殊 1000 --> 8 其它
    */
    function charType(num) {
        if (num >= 48 && num <= 57) {
            return 1;
        }
        if (num >= 97 && num <= 122) {
            return 2;
        }
        if (num >= 65 && num <= 90) {
            return 4;
        }
        return 8;
    }
</script>

</head>
<body>
<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
        <h1>
            我的信息
        </h1>
        <%--  <ol class="breadcrumb">
              <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
          </ol>--%>
    </section>
    <section class="content">
        <div class="box-body">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#tab-form" data-toggle="tab">信息编辑</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <form id="editForm" action="/system/user/updateInfo.do" method="post" enctype="multipart/form-data">
                        <input type="hidden" id="id" name="id" value="${user.id}">
                        <input type="hidden" id="email" name="email" value="${user.email}">
                        <div class="tab-pane active" id="tab-form">
                            <div class="row data-type">

                                <div class="col-md-2 title">我的头像</div>
                                <div class="col-md-4 data">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div><img src="${sessionScope.loginUser.img}" class="user-image"
                                                  alt="User Image" width="50px"></div>
                                    </a>
                                </div>

                                <div class="col-md-2 title">修改头像</div>
                                <div class="col-md-4 data">
                                    <input type="file" class="form-control" placeholder="请选择" name="userImg">
                                </div>


                                <div class="col-md-2 title">姓名</div>
                                <div class="col-md-4 data">
                                    <input type="text" class="form-control" name="userName" value="${user.userName}">
                                </div>
                                <div class="col-md-2 title">性别</div>
                                <div class="col-md-4 data">
                                    <input type="radio" name="gender"
                                           value='0'  ${loginUser.gender==0? 'checked="checked"':''} />男
                                    <input type="radio" name="gender"
                                           value='1'   ${loginUser.gender==1? 'checked="checked"':''}/>女
                                </div>
                                <div class="col-md-2 title">生日</div>
                                <div class="col-md-4 data">
                                    <input type="text" class="form-control"
                                           name="birthday"
                                           value="${loginUser.birthday}">
                                </div>
                                <div class="col-md-2 title">邮箱</div>
                                <div class="col-md-4 data">
                                    <input type="text" class="form-control"
                                           value="${loginUser.email}">
                                </div>
                                <div class="col-md-2 title">电话</div>
                                <div class="col-md-4 data">
                                    <input type="text" class="form-control"
                                           name="telephone"
                                           value="${loginUser.telephone}">
                                </div>
                                <div class="col-md-2 title">职务</div>
                                <div class="col-md-4 data">
                                    <input type="text" class="form-control"
                                           name="station"
                                           value="${loginUser.station}">
                                </div>


                                <div class="col-md-2 title">新密码</div>
                                <div class="col-md-4 data">
                                    <td>
                                        <input type="password" name="pwd" id="pwd" class="input" value
                                               autocomplete="off"/>
                                        <span>强度：</span>
                                        <span class="aaa">弱</span>
                                        <span class="aaa">中</span>
                                        <span class="aaa">强</span>
                                    </td>
                                </div>
                                <br/>


                                    <div class="col-md-2 title">短信验证码</div>
                                    <div class="col-md-4 data">
                                        <input type="text" id="smsCode" name="smsCode" class="check"
                                               placeholder="请输入验证码">
                                        <a href="javaScript:void(0)" id="sendSmsCode">发送手机验证码</a>
                                        <span>${errorMsg}</span>
                                        <script>
                                            //绑定发送手机验证码的js
                                            $(function () {
                                                //1.绑定点击事件
                                                $("#sendSmsCode").click(function () {
                                                    //2.获得用户当前输入的手机号
                                                    let telephoneVal = $("#telephone").val();
                                                    //如果需要校验手机号  此处自行校验
                                                    //3.发送ajax
                                                    let url = "${pageContext.request.contextPath}/user";//请求路径
                                                    let data = "action=sendRegisterSms&telephone=" + telephoneVal;//请求参数
                                                    let type = "json";//响应结果
                                                    $0.post(url, data, function (resultInfo) {
                                                        if (resultInfo.flag) {
                                                            alert(resultInfo.successMsg);
                                                        } else {
                                                            alert(resultInfo.errorMsg);
                                                        }
                                                    }, type);
                                                })
                                            })
                                        </script>
                                    </div>

                                    <!--工具栏-->
                                    <div class="box-tools text-center">
                                        <button type="button" onclick='document.getElementById("editForm").submit()'
                                                class="btn bg-maroon">保存
                                        </button>
                                        <button type="button" class="btn bg-default" onclick="history.back(-1);">返回
                                        </button>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>

    </section>
</div>
</body>

</html>